<template>
	<view class="apps">
		<view class="flex fdc  ptb20 plr20" style="background-color:#3c9cff;" v-if="user.id > 0" >
			<view class="flex br15 aic" >
				<view class="flex f1 aic">
					<uv-avatar :src="user.avatar" size="50"></uv-avatar>
					<view class="f1 flex fdc jcc ml20  white">
						<view class="f26 mr20 mb10 fweight4">{{user.nickname}}</view>
						<view class="flex aic">
							<view class="f26" v-if="user.group_id == '2'">尊享年卡会员</view>
							<view class="f26" v-else>普惠会员</view>
						</view>
					</view>
					<uv-icon name="level" color="#fff" size="80"></uv-icon>
				</view>
			</view>
			<view class="flex  ptb10 aic white">
				<view class="f22 f1 ptb10 plr10 flex jcc">
					<view class="f1 ptb10 plr10">余额：{{user.balance}}</view>
				</view>
				<view class="f22 f1 ptb10 plr10 flex jcc">
					<view class="f1 ptb10 plr10">赠送额：{{user.balance_zs}}</view>
				</view>
				<view class="f22 f1 ptb10 plr10 flex jcc">
					<view class="f1 ptb10 plr10">水果券：{{user.score}}</view>
				</view>
				<view class="f22 f1 ptb10 plr10 flex jcc">
					<view class="f1 ptb10 plr10">电瓶券：{{user.money}}</view>
				</view>
			</view>
		</view>
		<view class="flex fdc mt20 plr20 ptb20 mlr20 bgwhite">
			<view class="flex aic ptb10 bdb1s bceee" @click="getQcode()" v-if="user.remoter ==true">
				<uv-icon name="grid" size="60rpx" color="#3c9cff"></uv-icon>
				<view class="f14 f1 ml10 c666">获取验码</view>
			</view>
			<view class="flex aic ptb10 bdb1s bceee" @click="handle('/pages/mine/qcode/qcode','nav',true)" v-if="user.remoter ==true">
				<uv-icon name="grid-fill" size="60rpx" color="#3c9cff"></uv-icon>
				<view class="f14 f1 ml10 c666">发码记录</view>
			</view>
			<view class="flex aic ptb10 bdb1s bceee" @click="handle('/pages/mine/order/order','nav',true)">
				<uv-icon name="empty-news" size="60rpx" color="#3c9cff"></uv-icon>
				<view class="f14 f1 ml10 c666">充值订单</view>
			</view>
			<view class="flex aic ptb10 bdb1s bceee" @click="handle('/pages/mine/expense/expense','nav',true)">
				<uv-icon name="empty-history" size="60rpx" color="#3c9cff"></uv-icon>
				<view class="f14 f1 ml10 c666">消费记录</view>
			</view>
			<view class="flex aic ptb10 bdb1s bceee" @click="handle('/pages/mine/coupon','nav',true)">
				<uv-icon name="coupon" size="60rpx" color="#3c9cff"></uv-icon>
				<view class="f14 f1 ml10 c666">我的优惠券</view>
			</view>
			<!--view class="flex aic ptb10 bdb1s bceee" @click="handle('/pages/notice/index','nav',true)">
				<uv-icon name="volume" size="60rpx" color="#3c9cff"></uv-icon>
				<view class="f14 f1 ml10 c666">通知公告</view>
			</view-->
			<button class="btn flex aic ptb10 bdb1s bceee jcl bgwhite" open-type="contact">
				<uv-icon name="weixin-fill"  size="60rpx" color="#3c9cff"></uv-icon>
				<view class="f14 flex f1 ml10 c666">微信客服</view>
			</button>
		</view>
		<uv-tabbar :value="2" @change="tabbar">
			<uv-tabbar-item text="首页" icon="home"></uv-tabbar-item>
			<uv-tabbar-item>
				<template v-slot:text>
					<view class="flex pr tabcenter fdc">
						<uv-avatar src="https://mp.lifecloud.top/static/images/sao.png" size="50px"></uv-avatar>
						<view class="f12 blue">扫码洗车</view>
					</view>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
		</uv-tabbar>
		<uv-modal ref="modal" title="四位验证码" @confirm="confirm" :closeOnClickOverlay="false" confirmText="关闭" confirmColor="#f56c6c">
			<view class="flex f1 fdc ptb20 aic">
				<uv-code-input v-model="qcode" mode="box" :space="0" :maxlength="4" :disabledKeyboard="true" hairline color="#f56c6c"></uv-code-input>
				<view class="flex f1 fdc ptb20 aic f22">
					给顾客出示四位验证码,验证码5分钟有效期
				</view>
			</view>
		</uv-modal>
	</view>
</template>

<script>
	import { util } from '/common/util.js';
	let app;
	export default {
		data() {
			return {
				user:{},
				qcode:"",
				cardImage:'https://mp.lifecloud.top/static/images/vip.png',
			}
		},
		onLoad(){
			app = this;
			this.getUserInfo();
		},
		methods: {
			handle(e,f,d){
				uni.navigateTo({
					url:e,
				})
			},
			getQcode(){
				this.qcode = '';
				util.request({
					url:"/mpuser/qcode",
					load:1,
				}).then((res)=>{
					if(res.code == 1){
						app.qcode = res.data.gift_code;
						app.$refs.modal.open();
					}
				})
			},
			confirm() {
				this.qcode = '';
				this.$refs.modal.close();
			},
			getUserInfo(){
				util.request({
					url:"/mpuser/info",
				}).then((res)=>{
					if(res.code == 1){
						app.user = res.data;
					}
				})
			},
			tabbar(){
				if(e == '1'){
					scanQrcode();
				}
				if(e == '2'){
					if(!util.isLogin()){
						uni.setStorageSync('remount_url',JSON.stringify({
							type:'nav',
							page:'/pages/mine/mine',
						}))
						uni.navigateTo({
							url:"/pages/login/login"
						})
						return
					}
					uni.navigateTo({
						url:'/pages/mine/mine',
					})
				}
			},
			scanQrcode(){
				wx.scanCode({
				  onlyFromCamera: true,
				  scanType:['qrCode'],
				  success (res) {
					  if(res.errMsg == 'scanCode:ok'){
						  uni.navigateTo({
							url:'/pages/engine/engine?q='+encodeURIComponent(res.result),
						  })
					  }
				  }
				})
			}
		}
	}
</script>

<style scoped>
.bgcard{position:relative;}
.btn{background-color: #fff ;border-radius:0;line-height:auto !important;font-size: 14px !important;display: flex;padding:10rpx 0; margin:0; color:#666;}
	.btn::after{border:none !important; padding:0 !important;}
	.tabcenter{margin-top: -30px;}
</style>
